WordPress主題(Theme)如何開發？

2025 iThome 鐵人賽

DAY 3

Modern Web

WordPress核心全端開發實戰系列第 3 篇

17th鐵人賽 wordpress modern web

ZhuangKai

2025-08-03 19:22:13

197 瀏覽

分享至

主題開發方式分成以下兩種：
1.區塊佈景主題(BlockTheme) 從WordPress5.9版本開始可以使用的一種新型佈景主題。它是由HTML和一個佈景主題設定檔構成。主題完全由「區塊」組成，讓你可以在編輯器中編輯網站的所有部分。
講簡單一點就是比較多是以拖拉的方式進行開發及切版。
2.經典佈景主題(ClassicTheme) 沒有版本上的限制，使用PHP、JavaScript和CSS編寫。經典佈景主題可利用WordPress的PHP函式、鉤子(hooks)和過濾器(filters)進行功能擴展與自訂。
整體就是使用程式碼來控制佈景主題。

安裝Elementor區塊編輯

我先使用最方便的區塊佈景主題來展示。
區塊編輯器有很多種，我選的是Elementor。

安裝完成後就按下Activate。

之後全部都先按Skip。

然後會進入到Elementor編輯器頁面。

先到WordPress後台下載這一個hello-elementor主題，它比較輕量化，效能好。
也比較支援elementor的一系列操作。

這邊可以修改頁面名稱

可以先套用一個免費佈景主題試試看

然後你可以看到旁邊的結構就出現了，這個蠻方便的，命名的好，以後要修改的時候就很快。

之後按下publish然後按左邊眼睛的icon預覽看看～

你就可以開始佈置你的個人網站囉！

補充

主題(Theme)檔案拆解

這裡使用chatgpt分析一下hello-elementor主題。

hello-elementor/
├── includes/                     ← 核心功能模組（Elementor 整合、hooks）
│     └── ...                     ← 小尺寸、標題元設定
├── modules/                      ← Elementor 後台專用模組（如 admin-home）
├── template-parts/               ← 動態 header/footer 範本等
├── comments.php                  ← WP 預設留言區佈局
├── footer.php                    ← 頁尾結構與 `wp_footer()`
├── functions.php                 ← 主題啟動 functional hooks
├── header.php                    ← `<head>` + `<body>` 開始
├── index.php                     ← 預設首頁 / loop 內容
├── sidebar.php                   ← 如果啟用側邊欄的話使用
├── style.css                     ← 主題 metadata  + 幾乎無自訂 CSS
├── theme.json                    ← Block‑based 設定：樣式、字型、色彩變數
├── theme.php                     ← 核心 bootstrap 檔案：載入 includes／hooks
├── readme.txt                    ← 主題說明與版本資訊
├── screenshot.png               ← WP 後台「外觀→佈景主題」的預覽圖
├── php‎cs.xml, package.json, webpack.config.js… ← 開發工具設定檔  
└── composer.json                ← PHP 相依性／語言檔案設定

以下是幾個開發主題時的必要檔案
style.css：主題資訊與自訂CSS
templates/index.html：預設模板，區塊主題必備
functions.php：自訂PHP功能
screenshot.png：主題預覽圖